import { list } from '@/services/pay/order';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import { PageContainer, ProDescriptions, ProTable } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Button, Drawer } from 'antd';
import React, { useRef, useState } from 'react';

const TableList: React.FC = () => {
  const [showDetail, setShowDetail] = useState<boolean>(false);

  const actionRef = useRef<ActionType>();
  const [currentRow, setCurrentRow] = useState<PAY.Order>();

  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */
  const intl = useIntl();

  const columns: ProColumns<PAY.Order>[] = [
    {
      title: <FormattedMessage id="pages.pay.order.orderNumber" defaultMessage="Order Number" />,
      dataIndex: 'orderNumber',
      width: 180,
      render: (dom, entity) => {
        return (
          <a
            onClick={() => {
              setCurrentRow(entity);
              setShowDetail(true);
            }}
          >
            {dom}
          </a>
        );
      },
    },
    {
      title: <FormattedMessage id="pages.pay.order.user" defaultMessage="User" />,
      valueType: 'textarea',
      hideInForm: true,
      hideInSearch: true,
      render: (_, entity) => {
        return (
          <a
            onClick={() => {
              setCurrentRow(entity);
              setShowDetail(true);
            }}
          >
            {entity.user?.username || 'Unknown'}
          </a>
        );
      },
    },
    {
      title: <FormattedMessage id="pages.pay.order.status" defaultMessage="Status" />,
      dataIndex: 'status',
      hideInForm: true,
      valueEnum: {
        1: {
          text: <FormattedMessage id="pages.pay.order.status.unpaid" defaultMessage="Unpaid" />,
          status: 'Processing',
        },
        2: {
          text: <FormattedMessage id="pages.pay.order.status.pay" defaultMessage="Pay" />,
          status: 'Success',
        },
        3: {
          text: <FormattedMessage id="pages.pay.order.status.express" defaultMessage="Express" />,
          status: 'Success',
        },
        4: {
          text: <FormattedMessage id="pages.pay.order.status.done" defaultMessage="Done" />,
          status: 'Success',
        },
        5: {
          text: <FormattedMessage id="pages.pay.order.status.clean" defaultMessage="Clean" />,
          status: 'Success',
        },
      },
    },
    {
      title: (
        <FormattedMessage id="pages.pay.order.depositAmount" defaultMessage="Deposit Amount" />
      ),
      dataIndex: 'depositAmount',
      valueType: 'money',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: (
        <FormattedMessage id="pages.pay.order.paymentAmount" defaultMessage="Payment Amount" />
      ),
      dataIndex: 'paymentAmount',
      valueType: 'money',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: <FormattedMessage id="pages.pay.order.paymentDate" defaultMessage="Payment Date" />,
      dataIndex: 'paymentDate',
      valueType: 'dateTime',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: <FormattedMessage id="pages.pay.order.doneDate" defaultMessage="Done Date" />,
      dataIndex: 'doneDate',
      valueType: 'dateTime',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: <FormattedMessage id="pages.createDate" defaultMessage="Create Date" />,
      dataIndex: 'createDate',
      valueType: 'dateTime',
      hideInForm: true,
      hideInSearch: true,
    },
  ];

  return (
    <PageContainer>
      <ProTable<PAY.Order, API.PageParams>
        headerTitle={intl.formatMessage({
          id: 'pages.pay.order.title',
          defaultMessage: 'Order List',
        })}
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              // 导出
            }}
          >
            <PlusOutlined /> <FormattedMessage id="pages.export" defaultMessage="Export" />
          </Button>,
        ]}
        request={list}
        columns={columns}
      />
      <Drawer
        width={600}
        open={showDetail}
        onClose={() => {
          setCurrentRow(undefined);
          setShowDetail(false);
        }}
        closable={false}
      >
        {currentRow?.orderNumber && (
          <ProDescriptions<PAY.Order>
            column={2}
            title={currentRow?.orderNumber}
            request={async () => ({
              data: currentRow || {},
            })}
            params={{
              id: currentRow?.orderNumber,
            }}
            columns={columns as ProDescriptionsItemProps<PAY.Order>[]}
          />
        )}
      </Drawer>
    </PageContainer>
  );
};

export default TableList;
